<script setup lang="ts">
	import { useCorps } from "./utils/hook";
	import Refresh from "@iconify-icons/ep/refresh";
	import AddFill from "@iconify-icons/ri/add-circle-line";
	import { PureTableBar } from "@/components/RePureTableBar";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import { ref, onMounted } from "vue";
  import {
    productListApi,
    purchaseOrderListApi,
    deliveryOrderListApi,
    storeCheckListApi
  } from "@/api/purchaseOrderApi";
  import { debounce, throttle } from "@pureadmin/utils";
	const {
		form,
		loading,
		columns,
		dataList,
		pagination,
		isShow,
		onSearch,
		resetForm,
		openDialog,
		handleSizeChange,
		handleCurrentChange,
		deviceDetection,
    typeOption,
    sortChange,

	} = useCorps();
	const formRef = ref();
  onMounted(async()=> {
    getProductSelect();
    getPurchaseOrder();
    getDeliveryOrder();
    getStoreCheck();
  })
  const productSelect = ref();
  const getProductSelect = async(val?: any) => {
    const res: any = await productListApi({
      page: 1,
      perPage: 10,
      productName: val
    })
    productSelect.value = res?.result?.list;
  }
  // 入库单
  const purchaseOrderOption = ref();
  const getPurchaseOrder = async(val?: any) => {
    if(val && val.length < 6) {
      return
    }
    const res: any = await purchaseOrderListApi({
      page: 1,
      perPage: 10,
      orderNo: val
    })
    purchaseOrderOption.value = res?.result?.list;
  }
  // 出库单
  const deliveryOrderOption = ref();
  const getDeliveryOrder = async(val?: any) => {
    if(val && val.length < 6) {
      return
    }
    const res: any = await deliveryOrderListApi({
      page: 1,
      perPage: 10,
      orderNo: val
    })
    deliveryOrderOption.value = res?.result?.list;
  }
  // 盘点单
  const storeCheckOption = ref()
  const getStoreCheck = async(val?: any) => {
    if(val && val.length < 6) {
      return
    }
    const res: any = await storeCheckListApi({
      page: 1,
      perPage: 10,
      checkNo: val
    })
    storeCheckOption.value = res?.result?.list;
  }
</script>

<template>
	<div class="main">
		<el-form ref="formRef" :inline="true" :model="form"
			class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
			<el-form-item label="产品:">
        <el-select v-model="form.productId" placeholder="请选择" filterable :filter-method="getProductSelect" clearable class="!w-[180px]">
          <el-option :label="item.productName" :value="item.productId" v-for="item in productSelect" :key="item.productId"/>
        </el-select>
			</el-form-item>
     <!-- <el-form-item label="库区:">
      	<el-input v-model="form.productNo" class="!w-[180px]" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="库位:">
      	<el-input v-model="form.keyword" class="!w-[180px]" clearable placeholder="请输入" />
      </el-form-item> -->
      <el-form-item label="单据类型:">
      	<el-select v-model="form.type" placeholder="请选择" clearable class="!w-[100px]">
          <el-option :label="item.name" :value="item.id" v-for="item in typeOption" :key="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="入库单:" v-if="form.type === 1 || form.type === 5">
      	<el-select v-model="form.purchaseOrderId" placeholder="请选择" clearable class="!w-[180px]" filterable :filter-method="getPurchaseOrder">
          <el-option :label="item.orderNo" :value="item.purchaseOrderId" v-for="item in purchaseOrderOption" :key="item.purchaseOrderId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="出库单:" v-if="form.type === 2">
      	<el-select v-model="form.deliveryOrderId" placeholder="请选择" clearable class="!w-[180px]" filterable :filter-method="getDeliveryOrder">
          <el-option :label="item.orderNo" :value="item.deliveryOrderId" v-for="item in deliveryOrderOption" :key="item.deliveryOrderId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="盘点单:" v-if="form.type === 3 || form.type === 4">
      	<el-select v-model="form.storeCheckId" placeholder="请选择" clearable class="!w-[180px]" filterable :filter-method="getStoreCheck">
          <el-option :label="item.checkNo" :value="item.storeCheckId" v-for="item in storeCheckOption" :key="item.storeCheckId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期:">
        <el-date-picker v-model="form.rangeCreatedTime" type="daterange" placeholder="请选择" clearable style="width: 300px" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
      </el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch(1)">
					搜索
				</el-button>
				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
					重置
				</el-button>
			</el-form-item>
		</el-form>

		<div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
			<PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
				style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title=" " :columns="columns"
				@refresh="onSearch">
				<template v-slot="{ size, dynamicColumns }">
					<pure-table ref="tableRef" showOverflowTooltip table-layout="auto"
						:loading="loading" :size="size" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
						:data="dataList" :columns="dynamicColumns" :pagination="pagination" @sort-change="sortChange"
						:paginationSmall="size === 'small' ? true : false" :header-cell-style="{background: 'var(--el-fill-color-light)',
						color: 'var(--el-text-color-primary)'}" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
            <template #type="{ row }">
              <div v-for="item in typeOption" :key="item.id">
                <span v-if="row.type === item.id" :style="row.type === 2 || row.type === 4 || row.type === 5?'color: rgb(248, 152, 152);':'color: rgb(149, 212, 117);'">{{item.name}}</span>
              </div>
            </template>
            <template #changeNum="{ row }">
            	<span :style="row.type % 2 === 0?'color: rgb(248, 152, 152);':'color: rgb(149, 212, 117);'">{{row.changeNum*1}}</span>
            </template>
            <template #operation=" {row} ">
              <el-button type="primary" link @click="openDialog('详情', row)">详情</el-button>
            </template>
					</pure-table>
				</template>
			</PureTableBar>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.main-content {
		margin: 10px 10px 0 !important;
	}

</style>
